import DatePicker from "components/antd-compatible/date-picker";
import React, { Component } from "react"
import {  Icon } from 'antd'
import moment from 'moment'
import 'styles/pay/edit-cell.scss'

class EditDate extends Component {

  state = {
    editing: false,
    value: this.props.value
  };

  componentWillReceiveProps = nextProps => {
    if (nextProps.value !== this.state.value) {
      this.setState({ value: nextProps.value });
    }
  };

  toggleEdit = () => {
    const { disable } = this.props;
    if (!disable) {
      this.setState({ editing: true } );
    }
  };

  changeValue = value => {
    this.setState({ value, editing: false },() => {
      this.onChange();
    });
  };

  onChange = () => {
    const { value } = this.state;
    const { onChange } = this.props;
    onChange(value);
  };

  render() {
    const { editing, value } = this.state;
    const { style, title } = this.props;
    let children = editing ? (
      <DatePicker
        onBlur={this.changeBlur}
        value={value}
        format="YYYY-MM-DD"
        onChange={this.changeValue}
        allowClear
        style={{ width: '100%' }}
      />
    ) : (
      <div className='simulate-form' onClick={this.toggleEdit} style={style}>
        <span className='edit-cell-show'>{value ? moment(value).format('YYYY-MM-DD') : title}</span>
        <Icon type="edit" className="editable-cell-icon" />
      </div>
    );
    return (
      <div>{children}</div>
    )
  }

}

export default EditDate
